<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/JavaWeb/common/layui/css/layui.css">
</head>
<body>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	
	<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    		<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    		<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  		</div>
	</script>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script src="/JavaWeb/common/jquery-3.4.1.min.js"></script>
	<script src="/JavaWeb/common/layui/layui.js"></script>
	<script src="/JavaWeb/common/mylayer.js"></script>
	<script>
		layui.use('table', function(){
		  var table = layui.table;
		  
		  table.render({
		    elem: '#test'
		    ,url:'/JavaWeb/studentLayUI?method=selectAll'
		    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [[
		       {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title: 'ID', sort: true}
		      ,{field:'name',title: '用户名'}
		      ,{field:'age',title: '年龄', sort: true}
		      ,{field:'gender', title: '性别'}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		    ]]
		  });
		  
		//头工具栏事件
		  table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'getCheckData':
		        var data = checkStatus.data;
		        layer.alert(JSON.stringify(data));
		      break;
		      case 'getCheckLength':
		        var data = checkStatus.data;
		        layer.msg('选中了：'+ data.length + ' 个');
		      break;
		      case 'isAll':
		        layer.msg(checkStatus.isAll ? '全选': '未全选');
		      break;
		      
		      //自定义头工具栏右侧图标 - 提示
		      case 'LAYTABLE_TIPS':
		        layer.alert('这是工具栏右侧自定义的一个图标按钮');
		      break;
		    };
		  });
		  
		  //监听行工具事件
		  table.on('tool(test)', function(obj){
			// data代表当前这一行student对象
		    var data = obj.data;
		    //console.log(obj)
		    if(obj.event === 'del'){
		      	layer.confirm('真的删除行么', function(index){
		      		//$.post(url, [data], [callback], [type])
		    	    $.post(
		    	    	'/JavaWeb/studentLayUI?method=deleteById',
		    	    	{'id':data.id},
		    	    	function(jsonResult) {
		    	    		if (jsonResult.success) {
		    	    			mylayer.successMsg(jsonResult.msg);
		    	    			obj.del();
		    	    		} else {
		    	    			mylayer.errorMsg(jsonResult.msg);
		    	    		}
		    	    	},
		    	    	'json'
		    	    );
		    	  
		        	layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		      layer.prompt({
		        formType: 2
		        ,value: data.email
		      }, function(value, index){
		        obj.update({
		          email: value
		        });
		        layer.close(index);
		      });
		    }
		  });
		});
	</script>
</body>
</html>